<template>
	<view class="box">
		<u-sticky bgColor="#fff">
			<u-tabs :list="list" :lineWidth="80" lineColor="#0F53AC" :activeStyle="activeStyle" :scrollable="false"
				:inactiveStyle="inactiveStyle" :itemStyle="itemStyle" @click="tabsClick" :current="current">
			</u-tabs>
		</u-sticky>
		<view class="time-picker">
			<view class="item-box" @click="showStartTime=true">
				<view v-if="params.startTime" class="color2B">{{params.startTime}}</view>
				<view v-else>开始时间</view>
				<u-icon name="arrow-down"></u-icon>
			</view>
			<view class="item-box" @click="showEndTime=true">
				<view v-if="params.endTime" class="color2B">{{params.endTime}}</view>
				<view v-else>结束时间</view>
				<u-icon name="arrow-down"></u-icon>
			</view>
			<view class="item-box" :style="{color:statusLabel == '全部状态'? '#8C8C8C':'#2B2B2B'}" @click="showStatus=true"
				v-if="current == 1">
				{{statusLabel}}
				<u-icon name="arrow-down"></u-icon>
			</view>
		</view>

		<view class="main-list" @click="handleTo(item)" v-for="item in randomList" :key="item.id">
			<view class="title">
				<view class="title-left">
					<view class="left-text">{{item.dangerSite}}</view>
				</view>
				<view class="tag-main" v-if="item.auditStatus == 0">
					待审核
				</view>
				<view class="tag-success" v-if="item.auditStatus == 1">
					审核通过
				</view>
				<view class="tag-error" v-if="item.auditStatus == 2">
					审核不通过
				</view>
				<!-- <u-tag v-if="item.auditStatus == 0" text="待审核" type="warning" size="mini" plain plainFill></u-tag>
				<u-tag v-if="item.auditStatus == 1" text="审核通过" type="success" size="mini" plain plainFill></u-tag>
				<u-tag v-if="item.auditStatus == 2" text="审核不通过" type="error" size="mini" plain plainFill></u-tag> -->
			</view>
			<view class="content">{{item.dangerDesc}}</view>
			<view class="times">
				{{item.createTime}}
				<!-- <u-icon name="arrow-right"></u-icon> -->
			</view>
		</view>

		<u-loadmore v-if="total>6" :status="status" :line="true" />
		<view class="empty-data" v-if="randomList.length==0">
			<u-empty mode="data" :marginTop="100"></u-empty>
		</view>

		<u-datetime-picker :show="showStartTime" :value="startTimeValue" mode="date" @cancel="showStartTime=false"
			@confirm="onChangeStartTime">
		</u-datetime-picker>
		<u-datetime-picker :show="showEndTime" :value="endTimeValue" mode="date" @cancel="showEndTime=false"
			@confirm="onChangeEndTime">
		</u-datetime-picker>
		<u-picker :show="showStatus" :columns="statusColumns" keyName="label" @confirm="onChangeStatus"
			@cancel="cancelStatus"></u-picker>
		<view class="fixed-btn" @click="handleAdd">
			<view class="btn-icon">
				<image src="@/static/images/index/camera.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				approveFlag: true, //是否需要审核；true：需要 false：不需要
				activeStyle: {
					color: '#0F53AC',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				},
				inactiveStyle: {
					color: '#8c8c8c',
					transform: 'scale(1)'
				},
				itemStyle: {
					paddingLeft: '30rpx',
					paddingRight: '30rpx',
					paddingTop: '24rpx',
					paddingBottom: '24rpx',
					height: '48rpx'
				},
				current: 0,
				list: [{
					name: '我的随手拍',
				}, {
					name: '随手拍审核',
				}],
				startTime: '',
				showStartTime: false,
				startTimeValue: Number(new Date()),
				endTime: '',
				showEndTime: false,
				endTimeValue: Number(new Date()),
				showStatus: false,
				statusLabel: '全部状态',
				status: 'loadmore',
				pages: 1,
				total: 0,
				randomList: [],
				params: {
					pn: 1,
					ps: 6,
					// inspectionStatus: 0, //必须 0.未巡查   1.已巡查
					type: 1, //1.我的随手拍；2.随手拍审核；
				},
				statusColumns: [
					[{
							label: '全部状态',
							id: '-1'
						},
						{
							label: '待审核',
							id: '0'
						},
						{
							label: '审核通过',
							id: '1'
						},
						{
							label: '审核不通过',
							id: '2'
						},
					]
				]
			}
		},
		onShow() {
			this.params.pn = 1;
			this.randomList = []
			this.getList()
			//调用接口获取 随手拍审核权限
			this.getApproveFlag()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.params.pn = 1;
			this.randomList = []
			this.getList()
			//调用接口获取 随手拍审核权限
			this.getApproveFlag()
		},
		methods: {
			tabsClick(e) {
				this.current = e.index
				this.params.pn = 1;
				this.params.type = e.index + 1;
				this.params.startTime = ''
				this.params.endTime = ''
				this.params.auditStatus = '-1'
				this.statusLabel = '全部状态'
				this.randomList = []
				this.getList()
			},
			getList() {
				uni.$u.http.post(`/check/mobile/appSmallTake/smallTakeList`, this.params).then(res => {
					if (res.code == 0) {
						uni.stopPullDownRefresh();
						this.randomList = this.randomList.concat(res.data.records)
						this.pages = res.data.pages;
						this.total = res.data.total;
					}
				}).catch(err => {})
			},
			getApproveFlag() {
				uni.$u.http.get(`/check/mobile/appSmallTake/getApproveFlag`).then(res => {
					if (res.code == 0) {
						this.approveFlag = res.data
					}
				}).catch(err => {})
			},
			onChangeStartTime(e) {
				this.showStartTime = false
				const timeFormat = uni.$u.timeFormat;
				let timeValue = timeFormat(e.value, 'yyyy-mm-dd');
				this.params.startTime = timeValue
				if (this.params.endTime) {
					this.randomList = []
					this.getList()
				}
			},
			onChangeEndTime(e) {
				this.showEndTime = false
				const timeFormat = uni.$u.timeFormat;
				let timeValue = timeFormat(e.value, 'yyyy-mm-dd');
				this.params.endTime = timeValue
				if (this.params.startTime) {
					this.randomList = []
					this.getList()
				}
			},
			onChangeStatus(e) {
				this.params.auditStatus = e.value[0].id
				this.statusLabel = e.value[0].label
				this.showStatus = false
				this.randomList = []
				this.params.pn = 1
				this.getList()
			},
			cancelStatus() {
				this.showStatus = false
			},
			handleTo(item) {
				if (item.auditStatus == 0) {
					// 待审核
					uni.navigateTo({
						url: `/pages/subPackagesA/randomClap/waitRandom?randomId=${item.id}&type=${this.params.type}&current=${this.current}`
					})
				} else {
					// 审核通过 未通过
					uni.navigateTo({
						url: `/pages/subPackagesA/randomClap/successRandom?isStatus=${item.auditStatus}&randomId=${item.id}`
					})
				}
			},
			handleAdd() {
				if (this.approveFlag) {
					uni.navigateTo({
						url: '/pages/subPackagesA/randomClap/addRandom'
					})
				} else {
					uni.navigateTo({
						url: '/pages/subPackagesA/randomClap/addRandomFalse'
					})
				}
			}
		},
		onReachBottom() {
			if (this.params.pn >= this.pages) return;
			this.status = 'loading';
			this.params.pn = ++this.params.pn;
			setTimeout(() => {
				this.getList()
				if (this.params.pn >= this.pages) this.status = 'nomore';
				else this.status = 'loading';
			}, 1000)
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		.time-picker {
			display: flex;
			align-items: center;
			justify-content: space-around;
			// background-color: #f2f2f2;
			border-top: 2rpx solid #EDEDED;
			border-bottom: 2rpx solid #EDEDED;
			color: #8C8C8C;
			font-size: 30rpx;
			padding: 28rpx 32rpx;

			.item-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}

		.main-list {
			padding: 32rpx;
			border-bottom: 1px solid #f2f2f2;

			.title {
				display: flex;
				justify-content: space-between;
				font-size: 16px;
				font-weight: 400;
				margin-bottom: 20rpx;

				.title-left {
					font-size: 16px;
					font-weight: 400;
					width: 70%;
					word-wrap: break-word;
					word-break: break-all;

					.left-text {
						overflow: hidden; //超出的文本隐藏
						text-overflow: ellipsis; //溢出用省略号显示
						white-space: nowrap; // 默认不换行；
					}
				}
			}

			.content {
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden; //溢出内容隐藏
				text-overflow: ellipsis; //文本溢出部分用省略号表示
				display: -webkit-box; //特别显示模式
				-webkit-line-clamp: 2; //行数
				line-clamp: 2;
				-webkit-box-orient: vertical; //盒子中内容竖直排列
				font-size: 28rpx;
				color: #4D4D4D;
				margin-bottom: 20rpx;
				word-wrap: break-word;
				word-break: break-all;
			}

			.times {
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				color: #8C8C8C;
			}
		}

		
		.fixed-btn {
			position: fixed;
			bottom: 200rpx;
			right: 20rpx;
			z-index: 99;
			width: 160rpx;
			height: 160rpx;
			opacity: 1;
			background: rgba(15, 83, 172, 1);
			box-shadow: 0px 2px 6px rgba(10, 61, 128, 0.4);
			border-radius: 50%;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
		
			
		
				image {
					width: 60rpx;
					height: 60rpx;
				}
		}
	}
</style>
<style>
	page {
		height: 100vh;
	}

	.color2B {
		color: #2B2B2B;
	}
</style>